<template>
  <!-- 好生活结佣汇总-楼盘成交详情 -->
  <div class="buildingTradeDetail">
    <el-form :inline="true">
      <el-form-item label="客户来源：">
        <el-select v-model.trim="typeForm.customerSource" placeholder="请选择则客户来源">
          <el-option
            v-for="({label,value},index) in modalOptions"
            :key="index"
            :label="label"
            :value="value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户：">
        <el-input v-model.trim="typeForm.customerNameOrPhone" placeholder="请输入姓名/手机号"></el-input>
      </el-form-item>
      <el-form-item label="经纪人：">
        <el-input v-model.trim="typeForm.brokerNameOrPhone" placeholder="请输入姓名/手机号"></el-input>
      </el-form-item>
      <el-form-item label="成交时间：">
        <el-date-picker
          v-model="typeForm.time"
          type="datetimerange"
          range-separator="——"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-button type="primary" @click="searchList()" id="monitorEnter">查询</el-button>
    </el-form>
    <p class="text-info">
      <span>{{rowInfos.companyName}}</span>
      <span>{{rowInfos.devName}}</span>
    </p>
    <table-list
      :tableData="tableData"
      :tableInfos="tableInfos"
      :tableChangeBtns="tableChangeBtns"
      :tableFormatter="tableFormatter"
      :hasSera="true"
      :showSummary="true"
      :summaryMethod="summaryMethod"
    ></table-list>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top:30px"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="totalSize"
    ></el-pagination>
  </div>
</template>

<script type="text/ecmascript-6">
import tableList from "../common/tableList";
import utils from "@/common/utils.js";
import api from "@/api/apiPath";
export default {
  name: "buildingTradeDetail",
  components: {
    "table-list": tableList
  },
  data() {
    return {
      modalOptions: [
        { label: "全部", value: "" },
        { label: "推荐注册", value: 4 },
        { label: "经纪人录入", value: 0 },
        { label: "购房者注册", value: 3 },
        { label: "公众号注册", value: 5 },
        { label: "运营录入", value: 1 },
        { label: "网络推客录入", value: 6 },
        { label: "网络推客-集团小程序", value: 11 },
        { label: "认购录入", value: 13 }
      ],
      tableData: [],
      tableInfos: [
        { label: "客户姓名", prop: "customerName" },
        { label: "手机号", prop: "customerPhone" },
        { label: "客户来源", prop: "customerSource" },
        { label: "经纪人", prop: "brokerName" },
        { label: "房号", prop: "houseNum" },
        { label: "成交时间", prop: "dealTime" },
        { label: "成交价（元）", prop: "dealAmount" },
        { label: "房款（元）", prop: "devAmount" },
        { label: "好生活总收入（元）", prop: "amountTotal" },
        { label: "前佣金额（元）", prop: "frontAmount" },
        { label: "后佣金额（元）", prop: "afterAmount" },
        { label: "经纪人奖励总金额（元）", prop: "awardAmountTotal" },
        { label: "渠道总佣金（元）", prop: "amountBrokerTotal" },
        { label: "渠道前佣（元）", prop: "frontAmountBroker" },
        { label: "渠道后佣（元）", prop: "afterAmountBroker" },
        { label: "经纪人奖励金额（元）", prop: "awardAmount" },
        { label: "经纪人分佣比例", prop: "brokerageProportion" },
        { label: "经纪人应结佣金额（元）", prop: "nodeBrokerAmountTotal" },
        { label: "经纪人前佣（元）", prop: "frontNodeBrokerAmount" },
        { label: "经纪人后佣（元）", prop: "afterNodeBrokerAmount" },
        { label: "经纪公司应结佣金额（元）", prop: "nodeCompanyAmountTotal" },
        { label: "经纪公司前佣（元）", prop: "frontNodeCompanyAmount" },
        { label: "经纪公司后佣（元）", prop: "afterNodeCompanyAmount" },
        { label: "开发商应结佣金额（元）", prop: "developerAmountTotal" },
        { label: "开发商前佣（元）", prop: "frontdeveloperAmount" },
        { label: "开发商后佣（元）", prop: "afterdeveloperAmount" },
        { label: "好生活应结佣金额（元）", prop: "goodlifeAmountTotal" },
        { label: "好生活前佣（元）", prop: "frontgoodlifeAmount" },
        { label: "好生活后佣（元）", prop: "aftergoodlifeAmount" },
        { label: "经纪人奖励平台费（元）", prop: "awardAmountEasylife" },
        { label: "操作", prop: "changeBtn" }
      ],
      tableChangeBtns: [{ label: "查看详情", type: "view", fn: this.view }],
      customerSourceMap: {
        4: "推荐注册",
        0: "经纪人录入",
        3: "购房者注册",
        5: "公众号注册",
        1: "运营录入",
        6: "网络推客录入",
        11: "网络推客-集团小程序",
        13: "认购录入",
      },
      typeForm: {
        customerSource: "",
        customerNameOrPhone: "",
        brokerNameOrPhone: "",
        time: ["", ""]
      },
      totalRows: {},
      rowInfos: {},
      pageNum: 1,
      pageSize: 10, //每页几条
      totalSize: 0
    };
  },
  created() {
    this.rowInfos = this.$route.query;
    let netWorkTableInfo = [
      { label: "渠道总佣金（元）", prop: "amountBrokerTotal" },
      { label: "渠道前佣（元）", prop: "frontAmountBroker" },
      { label: "渠道后佣（元）", prop: "afterAmountBroker" }
    ];

    this.searchList();
  },
  mounted() {},
  methods: {
    searchList(pageNum) {
      this.typeForm.time = this.typeForm.time || [];
      let strDate = this.timeString(this.typeForm.time[0]);
      let endDate = this.timeString(this.typeForm.time[1]);
      let param = {
        pageNum: pageNum || this.pageNum,
        pageSize: this.pageSize,
        customerSource: this.typeForm.customerSource,
        customerNameOrPhone: this.typeForm.customerNameOrPhone,
        brokerNameOrPhone: this.typeForm.brokerNameOrPhone,
        strDate: strDate,
        endDate: endDate,
        devId: this.rowInfos.devId,
        projectId: this.rowInfos.projectId
      };
      this.axios.post(api.getSummaryDetailPageList, param).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.list.list || [];
          this.totalRows = res.data.data.Total || {};
          //Object.assign(this.totalRows,this.rowInfos);
          this.totalRows.customerSource = null;
          this.totalSize = res.data.data.list.total;
        }
      });
    },
    //表格格式化方法。prop对应array下标
    tableFormatter(prop, val, row) {
      if (val === null) {
        return "——";
      }
      let moneyFormatter = [
        "dealAmount",
        "devAmount",
        "amountTotal",
        "frontAmount",
        "afterAmount",
        "amountBrokerTotal",
        "frontAmountBroker",
        "afterAmountBroker",
        "developerAmountTotal",
        "frontdeveloperAmount",
        "afterdeveloperAmount",
        "goodlifeAmountTotal",
        "frontgoodlifeAmount",
        "aftergoodlifeAmount",
        "awardAmountTotal",
        "awardAmountEasylife",

        "nodeBrokerAmountTotal",
        "frontNodeBrokerAmount",
        "afterNodeBrokerAmount"
      ];
      let netWorkMoneyFm = [
        "awardAmount",
        //  2019-11-21  放开限制
        //"nodeBrokerAmountTotal",
        //"frontNodeBrokerAmount",
        //"afterNodeBrokerAmount",
        "nodeCompanyAmountTotal",
        "frontNodeCompanyAmount",
        "afterNodeCompanyAmount"
      ];
      if (moneyFormatter.includes(prop)) {
        return this.formatMoney(val);
      }
      if (netWorkMoneyFm.includes(prop)) {
        if (row.brokerType == 0) {
          return "——";
        }
        return this.formatMoney(val);
      }
      if (prop == "dealTime") {
        return utils.getTimeString(+val);
      }
      if (prop === "customerPhone") {
        return utils.formatPhoneNumber(val);
      }
      if (prop === "brokerageProportion") {
        if (val) {
          return val + "%";
        } else {
          if (row.brokerType == 0) {
            return "——";
          }
          return "0%";
        }
      }
      let propMap = {
        customerSource: this.customerSourceMap
      };
      return propMap[prop] ? propMap[prop][val] : val;
    },
    timeString(time) {
      if (!time) return "";
      return utils.getTimeString(time).slice(0, 10);
    },
    handleCurrentChange() {
      this.searchList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchList(1);
    },
    view(type, idx, row) {
      this.$router.push({
        path: "/brokerDealDetail",
        query: {
          brokerId: row.brokerId,
          orderId: row.orderId,
          brokerType: row.brokerType,
          brokerageName: row.brokerName,
          cityName: row.cityName,
          openBussinessName: this.rowInfos.companyName,
          devName: this.rowInfos.devName,
          houseNum: row.houseNum,
          customerName: row.customerName,
          phoneNum: row.customerPhone
        }
      });
    },
    //合计显示规则
    summaryMethod() {
      return this.totalRows;
    },
    formatMoney(val) {
      return val ? utils.formatMoney(val) : "0.00";
    }
  },
  computed: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.text-info {
  font-size: 14px;

  span {
    margin-right: 40px;
  }
}
</style>
